// components/AppComponents/Navbar.vue
<template>
<div class="nav">
<el-menu theme="dark" :default-active="activeIndex"
class= "el-menu-demo" mode= "horizontal" @ select= "handleSelect">
<el-menu-item index="1"  @click="gotolink" >Home </el-menu-item>
<el-menu-item index="2">Article </el-menu-item>
<el-submenu index="3">
<template slot="title">Projects </template>
<el-menu-item index="3-1">Shiny </el-menu-item>
<el-menu-item index="3-2">LearnVue </el-menu-item>
<el-menu-item index="3-3">OtherProject </el-menu-item>
</el-submenu>
<el-menu-item index="4">Login </el-menu-item>
<el-menu-item index="5">Resume </el-menu-item>
<el-menu-item index="5">About </el-menu-item>
</el-menu>
</div>

</template>
<script>
export default {
data () {
return {
activeIndex: '1',
activeIndex2: '1'
}
},
 gotolink(){
 
          //点击跳转至上次浏览页面
         // this.$router.go(-1)
 
          //指定跳转地址
          this.$router.replace('/HomeComponents/Home')
        },

methods: {
handleSelect (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
<style lang="">
    #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif ;
-webkit-font-smoothing: antialiased ;
-moz-osx-font-smoothing: grayscale ;
text-align: center ;
color: #2c3e50 ;
margin-top: 0px ;
}
.nav{  background-color: yellow;float: unset;
text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines; 
border: 1px solid red;
width:100%;}
</style>
